<template>
  <view class="membersList allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="家庭成员" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight">
      <template>
        <view class="membersList_headerTitle">
          <text class="membersList_headerTitle_text">{{ selectedFamilyDetail.familyName || '暂无家庭名称'}}</text>
        </view>
      </template>
    </header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="membersList_all allColumnCenter mt-25">
      <view class="membersList_all_search allRowCenter mt-40">
        <image class="membersList_all_search_image" src="/static/shiqin-images/search.png" mode="widthFix"></image>
        <text class="membersList_all_search_text">搜索</text>
      </view>
      <view class="membersList_all_list justify-between mt-44 mb-22">
        <view class="membersList_all_list_every allColumnCenter" v-for="(item,index) in membersList" :key="index"
              @click.stop="goToPath(item)">
          <image-avater :width="92" :height="92" :src="item.avatar"></image-avater>
          <template v-if="!!item.name && !!item.call">
            <view class="membersList_all_list_every_label allRowCenter">
              <text class="membersList_all_list_every_label_text">
                {{ item.remark }}
              </text>
            </view>
            <text class="membersList_all_list_every_text mt-24">
              {{ item.username }}
            </text>
          </template>
          <template v-else>
            <text class="membersList_all_list_every_text mt-12">
              {{ !!item.username ? item.username : item.remark }}
            </text>
          </template>
        </view>
      </view>
    </view>
    <view class="membersList_tip allColumnCenter">
      <view class="membersList_tip_top mt-25">
        <text class="membersList_tip_top_text">长按头像可拖动排序</text>
      </view>
      <bottom-button title="添加家庭成员" class="mt-25" :is-fixed="bottomFlag"
                     @elementClick="addFamilyMembers"></bottom-button>
    </view>
    <view style="height: 150rpx;"></view>

    <!-- 家庭成员弹窗 -->
    <first_popup ref="familyMemberPopUp">
      <template>
        <view class="familyMemberPopUp allColumnCenter">
          <scroll-view :scroll-left="familyMembersProfileListScroll.scrollLeft" :scroll-x="true"
                       class="familyMemberPopUp_scrollView mt-32"
                       scroll-with-animation>
            <view :id="selectProfileIndex == index ? 'familyMemberPopUp_scrollView_list':''"
                  class="familyMemberPopUp_scrollView_list" v-for="(item,index) in familyMembersProfileList" :style="{
              padding:index == 0 ? '0 12rpx 0 0':index == familyMembersProfileList.length?'0 0 0 12rpx':'0 12rpx'
            }" :key="index" @click="changeTab(index)">
              <image-avater id="imageAvater" :width="selectProfileIndex == index?111 : 78"
                            :height="selectProfileIndex == index? 111 : 78" :src="item.img"
                            :is-order="selectProfileIndex == index"
                            :border-width="4" border-color="#FF4206"></image-avater>
            </view>
          </scroll-view>
          <view class="familyMemberPopUp_editInfo row items-center justify-between mt-64">
            <view class="familyMemberPopUp_editInfo_left allRowCenter">
              <input type="text" :value="familyPopupFrom.nameBox" placeholder="尊姓"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="suernameInput"
                     @blur="surnameBlur">
            </view>
            <view class="familyMemberPopUp_editInfo_right allRowCenter">
              <input type="text" :value="familyPopupFrom.appellation" placeholder="大名"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="nameInput" @blur="nameBlur">
            </view>
          </view>
        </view>
      </template>
    </first_popup>

  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import ImageAvater from "../../components/shiqinComponents/pageComponents/imageAvater.vue";
import First_popup from "../../components/shiqinComponents/shiqin_globalPopUps/first_popup.vue";
import BottomButton from "../../components/shiqinComponents/shiqinButton/bottomButton.vue";
import {addFamilyMember, getConfigFamilyImage, getFamilyMemberList} from "../../api/shiqinAPI";

export default {
  components: {BottomButton, First_popup, ImageAvater, HeaderTitle},
  data() {
    return {
      // 头部高度
      headerHeight: 0,
      // 家庭成员列表
      membersList: [],
      // 家庭成员头像列表
      familyMembersProfileList: [
        '/static/shiqin-images/man.png',
        '/static/shiqin-images/woman.png',
        '/static/shiqin-images/woman.png',
        '/static/shiqin-images/man.png',
        '/static/shiqin-images/woman.png',
        '/static/shiqin-images/man.png',
        '/static/shiqin-images/woman.png',
        '/static/shiqin-images/man.png'
      ],
      // 选中的家庭成员头像的下标
      selectProfileIndex: 2,
      familyPopupFrom: {
        nameBox: '',
        appellation: ''
      },
      // 获取家庭成员参数
      getFamilyMemberListParams: {
        page: 1,
        pagesize: 50,
        family_id: '',
        type: 2,
        total:0
      },
      // 浮窗按钮的配置
      bottomFlag: false,
      systemInfo: {},
      familyMembersProfileListScroll: {
        scrollLeft: 0,
        allWidth: 0,
        width: 0,
        selectWidth: 0
      }
    };
  },
  computed: {
    family_id() {
      return this.$store.state.shiqinStore.selectedId
    },
    selectedFamilyDetail(){
      return this.$store.state.shiqinStore.selectedFamilyDetail
    }
  },
  watch: {
    familyMembersProfileListScroll: {
      deep: true,
      handler(newValue, oldValue) {
        this.familyMembersProfileListScroll.scrollLeft = newValue.allWidth - newValue.width / 2 + newValue.selectWidth / 2
      }
    }
  },
  onLoad() {
    this.setFamilyMemberList()
  },
  onReady() {
    this.$nextTick(() => {
      this.systemInfo = uni.getSystemInfoSync()
      this.$refs.headerTitle.getPageHeight()
      this.getBottomButton()
    })
  },
  methods: {
    suernameInput(e) {
      if (e.target.value.length > 1) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'nameBox', arr.join('').substring(0, 2))
        } else {
          this.$set(this.familyPopupFrom, 'nameBox', '')
        }
      }
    },
    surnameBlur(e) {
      if (e.target.value.length > 0) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'nameBox', arr.join('').substring(0, 2))
        } else {
          this.$set(this.familyPopupFrom, 'nameBox', '')
        }
      }
    },
    nameInput(e) {
      if (e.target.value.length > 1) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'appellation', arr.join('').substring(0, 4))
        } else {
          this.$set(this.familyPopupFrom, 'appellation', '')
        }
      }
    },
    nameBlur(e) {
      if (e.target.value.length > 0) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'appellation', arr.join('').substring(0, 4))
        } else {
          this.$set(this.familyPopupFrom, 'appellation', '')
        }
      }
    },
    getBottomButton() {
      const query = uni.createSelectorQuery().in(this)
      query.select('.membersList_all').boundingClientRect(data => {
        const rpx = this.systemInfo.windowWidth / 750
        this.bottomFlag = (this.headerHeight + data.top + data.height) > this.systemInfo.windowHeight - (200 * rpx)
      }).exec()
    },
    getPageHeight(number) {
      this.headerHeight = number
    },
    // 跳转用户详情
    goToPath(info) {
      this.$nav.navigateTo('/pages/shiqinUserPage/personalHome',{id:info.id})
    },
    // 添加家庭成员
    async addFamilyMembers() {
      let {data, status, msg} = await getConfigFamilyImage()
      if (status != '200') {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
        return
      }
      this.familyMembersProfileList = data.list
      this.$refs.familyMemberPopUp.openPopup({
        title: '添加家庭成员',
        maskClick: false,
        confirm: () => {
          if (this.familyPopupFrom.nameBox == '') {
            uni.showToast({
              title: '姓氏尚未填写',
              icon: 'none'
            })
            return
          }
          if (this.familyPopupFrom.appellation == '') {
            uni.showToast({
              title: '名称尚未填写',
              icon: 'none'
            })
            return
          }
          addFamilyMember({
            family_id: this.$store.state.shiqinStore.selectedId,
            surname: this.familyPopupFrom.nameBox,
            daimyo: this.familyPopupFrom.appellation,
            img: this.familyMembersProfileList[this.selectProfileIndex].img
          }).then(res => {
            if (res.status == '200') {
              uni.showToast({
                title: '添加成功',
                icon: 'none'
              })
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
            }
            this.$refs.familyMemberPopUp.closePopup()
            this.familyPopupFrom.appellation = ''
            this.familyPopupFrom.nameBox = ''
            this.membersList = []
            this.setFamilyMemberList()
          })
        }
      })
    },
    // 获取家庭成员
    async setFamilyMemberList() {
      this.getFamilyMemberListParams.family_id = this.family_id
      let {data} = await getFamilyMemberList(this.getFamilyMemberListParams)
      data.list.data.forEach(item=>{
        this.membersList.push(item)
      })
      this.getFamilyMemberListParams.total = data.list.total
      this.$nextTick(()=>{
        this.$refs.headerTitle.getPageHeight()
        this.getBottomButton()
        this.$forceUpdate()
      })
    },
    changeTab(index) {
      this.selectProfileIndex = index
      setTimeout(() => {
        this.moveTo(index)
      }, 10)
    },
    moveTo(index) {
      const query = uni.createSelectorQuery().in(this)
      query.select('.familyMemberPopUp_scrollView').boundingClientRect(data => {
        this.familyMembersProfileListScroll.width = data.width
      }).exec()
      query.select('#familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
        this.familyMembersProfileListScroll.selectWidth = rect.width
      }).exec()
      query.selectAll('.familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
        if (rect.length > 0) {
          this.familyMembersProfileListScroll.allWidth = 0
          rect.forEach((item, i) => {
            if (i < index) {
              this.familyMembersProfileListScroll.allWidth += Number(item.width)
            }
          })
        }
      }).exec()
    },
  },
}
</script>

<style lang="scss">
.membersList {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .membersList_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .membersList_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #A0A0A0;
    }
  }

  .membersList_all {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;

    .membersList_all_search {
      width: 656rpx;
      height: 80rpx;
      background: #E5E5E5;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .membersList_all_search_image {
        width: 25rpx;
        height: 25rpx;
      }

      .membersList_all_search_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #4B4B4B;
      }
    }

    .membersList_all_list {
      width: 656rpx;
      display: grid;
      grid-template-columns: repeat(5, 92rpx);
      grid-row-gap: 16rpx;

      .membersList_all_list_every {
        position: relative;

        .membersList_all_list_every_label {
          width: 84rpx;
          height: 27rpx;
          background: #FFFFFF;
          border-radius: 14rpx 14rpx 14rpx 14rpx;
          border: 1rpx solid #9B9B9B;
          position: absolute;
          top: 77rpx;
          left: 50%;
          transform: translateX(-50%);

          .membersList_all_list_every_label_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #4B4B4B;
          }
        }

        .membersList_all_list_every_name {
          .membersList_all_list_every_name_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #292929;
          }
        }

        .membersList_all_list_every_text {
          white-space: nowrap;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #292929;
        }
      }
    }
  }

  .membersList_tip {
    .membersList_tip_top {
      .membersList_tip_top_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #A0A0A0;
      }
    }

    .membersList_tip_bottom {
      width: 336rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 57rpx 57rpx 57rpx 57rpx;
      position: fixed;
      bottom: 50rpx;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;

      .membersList_tip_bottom_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }

  .familyMemberPopUp {
    width: 506rpx;

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_right {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }
}
</style>
